<!--端口检测-->
<template>
  <div class="h-[100%] box-border w-[100%]">
    <el-card shadow="always">
      <el-form
        size="default"
        inline="true"
        label-width="auto"
        class="translate-y-2"
      >
        <el-form-item label="用户名">
          <el-input
            style="width: 240px"
            placeholder="例:kk"
            v-model="dataParams.username"
            clearable
          />
        </el-form-item>

        <el-form-item label="备注">
          <el-input
            style="width: 240px"
            placeholder="例:kk"
            v-model="dataParams.remark"
            clearable
          />
        </el-form-item>

        <el-form-item>
          <el-button :icon="Refresh" type="primary" @click="getNtripAuthDataList"
            >刷新</el-button
          >
          <el-button
            :icon="Sunny"
            type="primary"
            @click="openForwardDialog(true, null)"
            >添加</el-button
          >
        </el-form-item>
      </el-form>
    </el-card>
    <div class="main mt-2">
      <el-card class="cardData" style="width: 100%; height: 100%">
        <el-table
          height="65vh"
          :border="true"
          :data="dataList"
          v-loading="tableLoading"
          :cell-style="{ 'text-align': 'center' }"
          :header-cell-style="{ 'text-align': 'center' }"
        >
          <el-table-column
            prop="username"
            label="用户名"
            width="150"
          ></el-table-column>

          <el-table-column prop="password" label="密码" />
          <el-table-column prop="stationName" label="认证基站">
          </el-table-column>
          <el-table-column prop="mountPoint" label="认证挂载点" />
          <el-table-column prop="remark" label="备注" />
          <el-table-column
            prop="createdAt"
            label="添加时间"
            :formatter="
              (row) => dayjs(row.createdAt).format('YYYY-MM-DD HH:mm:ss')
            "
          />

          <el-table-column
            prop="updatedAt"
            label="最新修改时间"
            :formatter="
              (row) => dayjs(row.createdAt).format('YYYY-MM-DD HH:mm:ss')
            "
          />
          <el-table-column label="操作" width="220">
            <template #default="scope">
              <el-button
                :icon="Edit"
                @click="openForwardDialog(false, scope.row)"
                >编辑
              </el-button>
              <el-button
                :icon="Delete"
                type="danger"
                @click="DeleteNtripAuthFun(scope.row)"
                >删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        <div class="w-[100%] mt-2 flex justify-end">
          <el-pagination
            v-model:current-page="dataParams.pageNum"
            v-model:page-size="dataParams.pageSize"
            :page-sizes="[10, 20]"
            :size="5"
            layout="total, sizes, prev, pager, next, jumper"
            :total="dataTotal"
            @size-change="
              (number) => {
                getNtripAuthDataList();
              }
            "
            @current-change="
              (number) => {
                getNtripAuthDataList();
              }
            "
          />
        </div>
      </el-card>
    </div>
  </div>
  <el-dialog
    draggable
    v-model="dialogStatusInfo.ntripDialog"
    :title="dialogStatusInfo.title"
    width="500"
  >
    <el-form inline label-width="100" ref="addForm">
      <el-form-item label="用户名:" prop="username">
        <el-input
          v-model="userAuthAddParams.username"
          placeholder="请输入用户名"
        ></el-input>
      </el-form-item>
      <el-form-item label="密码：" prop="password">
        <el-input
          v-model="userAuthAddParams.password"
          placeholder="请输入认证密码"
        ></el-input>
      </el-form-item>

      <el-form-item label="挂载点绑定：" prop="id">
        <el-select
          v-model="userAuthAddParams.mountPoint"
          filterable
          placeholder="请选择挂载点"
          style="width: 240px"
        >
          <el-option
            v-for="item in stationAllInfoList"
            :key="item.id"
            :label="item.mountPoint"
            :value="item.id"
          />
        </el-select>
      </el-form-item>

      <el-form-item label="备注:" prop="remark">
        <el-input
          v-model="userAuthAddParams.remark"
          placeholder="请输入备注"
        ></el-input>
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button
          :icon="CloseBold"
          @click="dialogStatusInfo.ntripDialog = false"
          >关闭</el-button
        >
        <el-button :icon="Check" type="primary" @click="userAuthAddFun">
          提交</el-button
        >
      </div>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { ref, onMounted } from "vue";

import { ElMessage, ElLoading } from "element-plus";
import {
  Delete,
  Refresh,
  Sunny,
  CloseBold,
  Check,
  Edit,
} from "@element-plus/icons-vue";
import type { ComponentSize } from "element-plus";
import {
  GetNtripAuthApi,
  AddNtripAuthApi,
  GetNtripStationAllApi,
  EditNtripAuthApi,
  DeleteNtripAuthApi,
} from "../../service/port";
import type { SearchNtripAuthParams } from "../../service/port";
import type { NtripAuthAddParams } from "../../service/port";
import dayjs from "dayjs";
import type { AnyMxRecord } from "dns";

/**
 * 公共数据
 */
const tableLoading = ref(false);
//弹窗修改状态信息
const dialogStatusInfo = ref({
  isAdd: true,
  ntripDialog: false,
  title: "",
});

/**
 * 弹窗打开函数
 */
const openForwardDialog = (flag: boolean, row: any) => {
  if (flag) {
    dialogStatusInfo.value.ntripDialog = true;
    dialogStatusInfo.value.isAdd = true;
    dialogStatusInfo.value.title = "Ntrip认证添加";
    return;
  }
  if (row.status) {
    ElMessage.warning("启用状态禁止编辑");
    return;
  }
  dialogStatusInfo.value.ntripDialog = true;
  dialogStatusInfo.value.isAdd = false;
  dialogStatusInfo.value.title = "Ntrip认证编辑";
  userAuthAddParams.value.username = row.username;
  userAuthAddParams.value.password = row.password;
  stationAllInfoList.value.forEach((v) => {
    if (v.mountPoint === row.mountPoint) {
      userAuthAddParams.value.mountPoint = v.id;
    }
  });
  userAuthAddParams.value.remark = row.remark;
  userAuthAddParams.value.id = row.id;
};

/**
 * 用户认证信息数据获取*************************
 */
//数据列表
const dataList = ref([]);
const dataTotal = ref(0);
//数据查询参数
const dataParams = ref<SearchNtripAuthParams>({
  pageSize: 10,
  pageNum: 1,
  username: "",
  remark: "",
});
const getNtripAuthDataList = async () => {
  tableLoading.value = true;
  const res = await GetNtripAuthApi(dataParams.value);
  if (res.data == null) {
    dataList.value = [];
  } else {
    dataList.value = res.data.list;
  }
  dataTotal.value = res.data.total;
  tableLoading.value = false;
};

/**
 * 获取所有基站列表
 */

const GetAllStationListFun = async () => {
  const res = await GetNtripStationAllApi();
  if (res.code == 200) {
    stationAllInfoList.value = res.data.list;
  }
};

/**
 * 用户认证添加
 */
const userAuthAddParams = ref<NtripAuthAddParams>({
  username: "",
  password: "",
  remark: "",
  mountPoint: undefined,
});

interface StationInfo {
  id: number;
  mountPoint: string;
}
type StationInfoArray = StationInfo[];
const stationAllInfoList = ref<StationInfoArray>([]);
const userAuthAddFun = async () => {
  if (dialogStatusInfo.value.isAdd) {
    const res = await AddNtripAuthApi(userAuthAddParams.value);
    if (res.code == 200) {
      ElMessage.success("新增成功");
      dialogStatusInfo.value.ntripDialog = false;
      getNtripAuthDataList();
    } else {
      ElMessage.error(res.data);
    }
  } else {
    const res = await EditNtripAuthApi(userAuthAddParams.value);
    if (res.code == 200) {
      ElMessage.success("编辑成功");
      dialogStatusInfo.value.ntripDialog = false;
      getNtripAuthDataList();
    } else {
      ElMessage.error(res.data);
    }
  }
};
/**
 * ntrip认证记录删除
 */
const DeleteNtripAuthFun = async (row: any) => {
  const res = await DeleteNtripAuthApi(row.id);
  if (res.code == 200) {
    ElMessage.success("删除成功");
  } else {
    ElMessage.error(res.data);
  }
  getNtripAuthDataList();
};
/**
 *  周期钩子函数********************************
 */

onMounted(() => {
  getNtripAuthDataList();
  GetAllStationListFun();
  console.log("端口转发页面加载", this);
});
</script>

<style scoped>
.container {
  box-sizing: border-box;
  height: 100%;
}

::v-deep(.el-table .success) {
  background-color: #e9ffdb;
}

::v-deep(.el-table .fail) {
  background-color: #ffc87c;
}

[type="file"] {
  color: red;
  /* font-size: 0; */
}

/* 主按钮的样式自定义 */
::file-selector-button {
  height: 2.5rem;
  color: #fff;
  border-radius: 0.25rem;
  border: 1px solid #2a80eb;
  padding: 0.75rem 1rem;
  background-color: #2a80eb;
  cursor: pointer;
}

::-ms-browse {
  height: 3rem;
  color: #fff;
  border-radius: 0.25rem;
  border: 1px solid #2a80eb;
  padding: 0.75rem 1rem;
  background-color: #2a80eb;
  cursor: pointer;
}

.page {
  position: absolute;
  bottom: 10px;
  left: 400px;
}

/*
  .cardData {
    position: relative;
    height: 95%;
  } */

.card {
  /* width: 80vw; */
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: space-around;
}

.card2 {
  height: 80px;
  width: 200px;
  display: flex;
  align-items: center;
  justify-content: space-around;
}

.isActive {
  background-color: red;
  color: bisque;
}

.header {
  /* background-color: rgb(240, 240, 240); */
  display: flex;
  align-items: center;
  justify-content: space-around;
  height: 10%;
}

.main {
  display: flex;
  height: 90%;
}

.el-table .warning-row {
  --el-table-tr-bg-color: var(--el-color-warning-light-9);
}

.el-table .success-row {
  --el-table-tr-bg-color: var(--el-color-success-light-9);
}
</style>
